<!DOCTYPE html>
<html>
<head>
    <title>Diff test</title>
    <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="main_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
    <div class="left">
        <h3>Original</h3>
        <textarea id="original">
body {
    background-color: #FFFFFF;
}

#wrapper {
    /*width: 1310px;*/
    width: 100%;
    height: 500px;
}

#left {
    float: left;
    /*width: 650px;*/
    width: 49%;
    height: 500px;
    overflow-x: auto;
    overflow-y: auto;
    /*margin-right: 10px;*/
    margin-right: 2%;
}

#right {
    float: right;
    /*width: 650px;*/
    width: 49%;
    height: 500px;
    overflow-x: auto;
    overflow-y: auto;
}
        </textarea>
    </div>
    <div class="right">
        <h3>Edit</h3>
        <textarea id="edited">
body {
    background-color: #FFFFFF;
}

.text {
    width: 50%;
}

.wrapper {
    width: 100%;
}

.left {
    float: left;
    width: 49%;
    margin-right: 2%;
}

.scroll {
    height: 500px;
    overflow-x: auto;
    overflow-y: auto;
}

.right {
    float: right;
    width: 49%;
}
        </textarea>
    </div>
</div>
<button class="btn" onclick="doDiff()">
    <strong>Diff</strong>
</button>
<div class="wrapper">
    <div class="left">
        <h3>Original</h3>
    </div>
    <div class="right">
        <h3>Edit</h3>
    </div>
</div>
<div class="wrapper">
    <div class="left scroll" id="scrollLeft">
        <pre id="original_result"></pre>
    </div>
    <div class="right scroll" id="scrollRight">
        <pre id="edited_result"></pre>
    </div>
</div>
<script src="LineDiff.js"></script>
<script src="EditSet.js"></script>
<script src="LineUtils.js"></script>
<script src="Diff.js"></script>
<script src="DiffFormatter.js"></script>
<script src="LineFormatter.js"></script>
<script src="AnchorIterator.js"></script>
<script>
    var scrollLeft = document.getElementById('scrollLeft');
    var scrollRight = document.getElementById('scrollRight');

    scrollLeft.addEventListener('scroll', function() {
        scrollRight.scrollLeft = scrollLeft.scrollLeft;
        scrollRight.scrollTop = scrollLeft.scrollTop;
    });

    scrollRight.addEventListener('scroll', function() {
        scrollLeft.scrollLeft = scrollRight.scrollLeft;
        scrollLeft.scrollTop = scrollRight.scrollTop;
    });

    function doDiff() {
        var diff = new SourceDiff.Diff(true);   //ignore leading whitespace
        var formatter = new SourceDiff.DiffFormatter(diff);

        var text1 = document.getElementById('original').value;
        var text2 = document.getElementById('edited').value;

        var results = formatter.formattedDiff(text1, text2);

        document.getElementById('original_result').innerHTML = results[0];
        document.getElementById('edited_result').innerHTML = results[1];
    }
</script>
</body>
</html>